<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /* 内外边距为0 */
            padding: 0;
            margin: 0;
        }
        #app>div{
            /* 圆角属性 */
            border-radius:50% ;
            /* 绝对定位 */
            position: absolute;
            width: 100px;
            height: 120px;
            /* scale缩放 rotate旋转 */
            /*顺时针旋转45度*/
            transform: rotate(5deg);
            /* inset内阴影 */
            /* 盒子阴影 x位移 y位移 羽化 半径 颜色  */
            box-shadow: -8px -8px 80px -8px #873940 inset;
        }

        #app>div::after{/* 伪元素 */
            /* 将元素显示为块级元素 */
            display: block;
            /* 网页中呈现给用户的0种信息 */
            content: "";
            position: absolute;
            bottom: -8px;
            right: 50px;
            border: 8px solid transparent;/* 透明 */
            border-right-color: #873940;
            border-radius: 50%;

        }
        #app>div::before{
            display: block;
            content: "";
            position: absolute;
            width: 1px;
            height: 90px;
            background-color: #ccc;
            right: 49px;
            bottom: -90px;
            transform: rotate(-5deg);
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
</html>
<script>
    let app=document.getElementById("app")
    let div=document.createElement('div')
    function creatBall(){
        let div=document.createElement('div')
        // console.log(screen.height);
        // console.log(screen.width);
        // screen.width-100避免气球出界
        /* screen小写 */
        let width=Math.random()*(screen.width-100)
        let height=Math.random()*(900-600)+300
        //设置气球的水平位置
        div.style.left=width+'px'
        div.style.top=height+'px'
        //设置随机颜色 16进制的随机颜色
        div.style.backgroundColor='#'+Math.random().toString(16).substring(3,9)
        //每一个气球加一个定时器
        div.timer=setInterval(()=>{
            if(height>0){
                //设置气球上升的速度
                let top=Math.random()*4+2
                height-=top
                div.style.top=height+'px'
            }else{
                clearInterval(div.timer)
            }
        },400)
        app.appendChild(div)
    }
    let i=1
    let ir=setInterval(()=>{
        creatBall()
        if(i==1000){
            clearInterval(ir)
        }else{
            i++
        }
    },300)
</script>